import React, { Component } from 'react';
import './index.css';
import Header from '../Header';
import List from '../List';
import Footer from '../Footer';
export default class Play extends Component {
  state = {
    todos: [
      { id: '001', name: '吃饭', done: true },
      { id: '002', name: '睡觉', done: true },
      { id: '003', name: '打豆豆', done: false }
    ]
  };

  // 添加
  addTodo = todoObj => {
    //获取原todos
    const { todos } = this.state;
    //追加一个todo
    const newTodos = [todoObj, ...todos];
    //更新状态
    this.setState({ todos: newTodos });
    console.log(this.state);
  };

  // 改变列表中选择框状态
  updateTodo = (id, cheked) => {
    const { todos } = this.state;
    const newTodos = todos.map(item => {
      if (item.id === id) {
        // 习惯写法
        // item.done = cheked;
        // new
        return { ...item, done: cheked };
      } else {
        return item;
      }
    });
    this.setState({ todos: newTodos });
    console.log(this.state);
  };

  // 删除
  deleteTodo = id => {
    const { todos } = this.state;
    // 删除指定id元素
    const newTodos = todos.filter(todo => {
      // if (todo.id !== id) {
      //   return true;
      // } else {
      //   return false
      // }
      // 返回true/false可以简化写法
      return todo.id !== id;
    });
    console.log('删除后的新数组', newTodos);

    this.setState({ todos: newTodos });
  };

  // 改变所有todo状态
  updateAllTodo = done => {
    const { todos } = this.state;
    const newTodos = todos.map(todo => {
      return { ...todo, done: done };
    });
    console.log('111', newTodos);
    this.setState({ todos: newTodos });
  };

  // 清楚所有选项
  deleteAllTodo = () => {
    const { todos } = this.state;
    const newTodos = todos.filter(todo => {
      return !todo.done;
    });
    this.setState({ todos: newTodos });
  };
  render() {
    const { todos } = this.state;
    return (
      <div className="play-box">
        <div className="todo-wrap">
          <Header addTodo={this.addTodo}></Header>
          <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}></List>
          <Footer todos={todos} updateAllTodo={this.updateAllTodo} deleteAllTodo={this.deleteAllTodo}></Footer>
        </div>
      </div>
    );
  }
}
